import React from 'react'
import WNavBar from '@components/global/navBar'
import ProductModel, { dateStr } from '@models/productModel'
// @ts-ignore
import Styles from './index.scss'
import Marked from '@components/global/marked/parsing'
import { WingBlank, WhiteSpace } from 'antd-mobile';
// @ts-ignore
import LinkIcon from '../../../icons/link.svg'

interface PopInterface {
  title: string
  model: ProductModel,
}

const ProductList = (props: PopInterface) => {

  return (
    <WNavBar title={props.title}>
      <WingBlank size="sm">
        <WhiteSpace />
        <div className={`w-flex-center`}>
          {
            props.model.url ?
              <a href={props.model.url} className={`w-text-underline ${Styles.title}`}>{props.model.name}</a> :
              <span>{props.model.name}</span>
          }
        </div>
        <p className={`w-text-center ${Styles.version}`}>{props.model.version}</p>
        <p className={`w-text-center ${Styles.date}`}>{dateStr(props.model)}</p>
        <p className={`w-text-center ${Styles.describe}`}>{props.model.describe}</p>
        <Marked markedStr={props.model.content} />
      </WingBlank>
    </WNavBar>
  )
}
ProductList.getInitialProps = async ({ ctx }: any) => {
  // 获取所有的 banner 数据
  const model = await ProductModel.getDetail(ctx.query.id)

  return {
    title: model.name,
    model
  }
}

export default ProductList
